<template>
  <div class="home">
    <!--搜索 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @focus="sech_click" />

    <!--搜索弹出框 -->
    <van-popup
      v-model="$store.state.popupShow"
      position="bottom"
      :style="{ height: '90%', width: '100%', background:'#efefef' }"
    >
      <sub-popup />
    </van-popup>
    <!--bannner -->
    <banner :bannerarr="bannerArr"></banner>
    <!--九宫格分类 -->
    <channel :channelarr="ChannelArr"></channel>

    <!-- brand -->
    <brand :bannerarr="bannerArr"></brand>
    <new :newarr="NewArr" title="周一周四 · 新品首发"></new>
    <Popularity :popularityarr="PopularityArr"></Popularity>
    <topicList :topiclist="topicList"></topicList>
    <Tabbar></Tabbar>
    <new v-for="item in categoryList" :key="item.id" :title="item.name" :newarr="item.goodsList"/>
  </div>
</template>

<script>
// @ is an alias to /src

import SubPopup from "@/components/SubPopup/SubPopup.vue";
import axios from "axios";

// 引入
import { GetHomeurl } from "@/request/api.js";
// 引入banner子组件
import banner from "@/components/home/banner";
// 引入Channel子组件
import Channel from "@/components/home/Channel";
// 引入brand 子组件
import Brand from "@/components/home/Brand";
// 引入new 子组件
import New from "@/components/home/New";

// 引入Card
import Popularity from "@/components/home/Popularity";
// topicList
import topicList from "@/components/home/topicList";
//footer
import Tabbar from "@/components/home/Tabbar.vue";

export default {
  name: "Home",
  data() {
    return {
      value: "",
      // banner数组
      bannerArr: [],
      ChannelArr: [],
      NewArr: [],
      PopularityArr: [],
      topicList: [],
      categoryList: []
    };
  },
  components: {
    SubPopup,
    banner,
    Channel,
    Brand,
    New,
    Popularity,
    topicList,
    Tabbar
  },
  methods: {
    sech_click() {
      this.$store.commit("controlPopupShow", true);
    }
  },
  created() {
    GetHomeurl().then(res => {
      if (res.data.errno == 0) {
        this.bannerArr = res.data.data.banner;
        this.ChannelArr = res.data.data.channel;
        this.NewArr = res.data.data.newGoodsList;
        this.PopularityArr = res.data.data.hotGoodsList;
        this.topicList = res.data.data.topicListtghithis;
        this.categoryList = res.data.data.categoryList;
      }
    });
  }
};
</script>
<style lang="less" scoped>
.home {
  background-color: #f4f4f4;
  height: auto;
}
</style>

